<template>
    <page-header-wrapper>
      <a-card :bordered="false">
        <div class="table-page-search-wrapper">
          <a-row type="flex" justify="start">
            <span
              v-for="status in AuditStatusArray"
              :key="status.code"
              @click="selected(status.code)"
              style="margin-right: 60px"
              :class="{'active': status.code == auditStatus}"
              class="mouseOn"
            >
              {{ status.message }}
            </span>
          </a-row>
          <a-row type="flex" justify="start" style="margin: 20px 0" >
            <a-col :span="4" style="margin-right: 10px">
              <a-input v-model="value" placeholder="输入关键字" allow-clear></a-input>
            </a-col>
            <a-col :span="4">
              <a-config-provider :auto-insert-space-in-button="false">
                <a-button type="primary" @click="toSearch">
                  查找
                </a-button>
              </a-config-provider>
            </a-col>
          </a-row>
        </div>
        <a-table :scroll="{ x: 1500}" :columns="columns" :data-source="info" bordered :pagination="pagination" 
          :rowKey="record=>record.id">
          <div slot="content" slot-scope="text,record">
            <a @click="matchPush(record)" class="mr-15" :disabled="record.auditStatus !== 2">匹配推送</a>
            <a @click="toContent(record.id)">{{ record.auditStatus === 1 ? "审核" : "查看" }}</a>
          </div>
        </a-table>
        <!-- 匹配推送 -->
        <a-modal title="匹配企业推荐" :visible="matchPushVis" okText="推送" @ok="pushCompany" @cancel="cancelPush">
          <a-table :row-selection="{ selectedRowKeys: selectMatchCompany, onChange: onSelectMCompany }" 
            :rowKey="record=>record.entId" :columns="matchColumns"  :data-source="recommCompanyInfo" bordered :pagination="false">
            <a slot="entName" slot-scope="text, record" target="_blank" title="点击可查看企业详情"
              :href="`${webHref}/aupply-chains-14-16203/entdetails?id=${record.entId}`">{{ text }}</a>
          </a-table>
        </a-modal>
      </a-card>
    </page-header-wrapper>
</template>

<script>
import { GetSearchPageList } from '@/api/product.js'
import { getRecommEntInfo, recommEntInfo } from '@/api/product'
const AuditStatusArray = [
  {
    code: "",
    message: '全部',
  },
  {
    code: 1,
    message: '审核中',
  },
  {
    code: 2,
    message: '已通过',
  },
  {
    code: 3,
    message: '未通过',
  },
]
  export default {
    data() {
      return {
        value:'',
        auditStatus: "",
        matchPushVis: false,
        // webHref: 'http://10.204.124.225',
        webHref: 'https://economic.szlhq.gov.cn',
        AuditStatusArray: AuditStatusArray,
        pagination: {
          total: 0,
          pageSize:10,
          current:1,
          pageSizeOptions: ["10", "20", "30", "40","50"],
          showTotal: total => `共有 ${total} 条数据`, 
          showQuickJumper: true,
          showSizeChanger:true,
          onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
          onChange: (page, pageSize) => this.onPageChange(page, pageSize),
        },
        columns: [
          {
            title: '编号',
            dataIndex: 'productNo',
            align: 'center',
          }, {
            title: '产品名称',
            dataIndex: 'productName',
            // align: 'center'
          }
          ,{
            title: '创建时间',
            dataIndex: 'createTime',
            align: 'center',
          },
          {
            title: '更新时间',
            dataIndex: 'updateTime',
            align: 'center',
          },
          {
            title: '状态',
            dataIndex: 'auditStatus',
            align: 'center',
            customRender:function (text) {
              if(text==1){
                return "审核中"
              }else if(text==2){
                return "已通过"
              }else if(text==3){
                return "未通过"
              }
            }
          },{
            title: '操作',
            dataIndex: 'content',
            align: 'center',
            width: 150,
            fixed: 'right',
            scopedSlots: { customRender: 'content' }
          }
        ],
        info:[],
        matchColumns: [
          {
            title: '企业名称',
            dataIndex: 'entName',
            scopedSlots: { customRender: 'entName' }
          }
        ],
        recommCompanyInfo: [],
        selectMatchCompany: [],
        productInfo: {}
      }
    },
    created(){
      this.GetSearchPageList()
    },
    methods:{
      // 打开匹配推送弹框
      matchPush(record) {
        this.productInfo = record
        let requestData = {
          entId: this.productInfo.entId,
          productOneCategory: this.productInfo.productOneCategory,
          queryStatus: 2
        }
        getRecommEntInfo(requestData).then(res => {
          if(res && res.code === 200) {
            const { data } = res
            this.recommCompanyInfo = data
            this.matchPushVis = true
          }else {
            this.$message.error('请求失败')
          }
        }).catch(err => {
          if(err) {
            this.$message.error('请求失败')
          }
        })
      },
      // 选择推送企业
      onSelectMCompany(selectedRowKeys) {
        this.selectMatchCompany = selectedRowKeys
      },
      // 推送
      pushCompany() {
        if(this.selectMatchCompany.length !== 0) {
          let requestData = []
          for(let i = 0; i < this.selectMatchCompany.length; i++) {
            requestData.splice(i, 1, {
              entId: this.selectMatchCompany[i],
              entName: this.recommCompanyInfo.find(ele => ele.entId === this.selectMatchCompany[i]).entName,
              demandNo: this.productInfo.productNo,
              recommender: this.$store.getters.userInfo
            })
          }
          recommEntInfo(requestData).then(res => {
            if(res && res.code === 200) {
              this.$message.success('推送成功')
              this.matchPushVis = false
              this.selectMatchCompany = []
            }else {
              this.$message.error('推送失败')
            }
          }).catch(err => {
            if(err) {
              this.$message.error('请求失败')
            }
          })
        }else {
          this.$message.warning('请选择推送企业')
        }
      },
      // 取消推送
      cancelPush() {
        this.matchPushVis = false
        this.selectMatchCompany = []
      },
      //查询
      toSearch(){
        this.pagination.current = 1
        this.GetSearchPageList(this.value,this.auditStatus);
      },
      selected(code){
        this.pagination.current = 1
        this.auditStatus = code
        this.GetSearchPageList(this.value,this.auditStatus);
      },
      toContent(id){
        this.$router.push({
          path: '/infoVerify/ProductInfo',
          query:{id}
        })
      },
      // 分页搜索
      onPageChange(page, pageSize) {
        this.pagination.current = page;
        this.GetSearchPageList(this.value,this.auditStatus);
      },
      // 页容量改变 
      onSizeChange(current, pageSize) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = current;
        this.GetSearchPageList(this.value,this.auditStatus);
      },
      // 获取列表
      GetSearchPageList(keyword,auditStatus) {
        let _params = {
          size: this.pagination.pageSize,
          current: this.pagination.current,
          orderTypes:7,
          keyword,
          auditStatus
        };
        GetSearchPageList(_params)
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.info = res.data.records
              this.pagination.total = res.data.total;
              console.log(this.info)
            }
          })
          .catch((error) => {});
      },
    },
    computed: {
      rowSelection() {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
.active {
  color: #1890ff !important;
}
.mouseOn:hover {
  cursor: pointer;
  color: #1890ff !important;
}
</style>
